<hr />

Report created here
<br />
<br />

<ul id="report_container">
</ul>

Report name <input type="text" name="Report_model" id="Report_model"><br />

<input type="button" value="Save report model" id="save_report_model"><br />

<div class="save_report_model_form">
    <form action="/report/create-action" method="post">
        <input type="text" name="data" id="save_report_model_form_data">
    </form>
</div>

<hr />
<br />
<br />
Add questions from here

<div class="questions_add_container">
    <div class="question_add_me hand" id="question_add_single_text" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Single answer question with text answer ?
        </div>
        <div class="questions_add_answer">
            <input type="text" value="Text answer">
        </div>
    </div>

    <div class="question_add_me hand" id="question_add_single_number" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Single answer question with number answer ?
        </div>
        <div class="questions_add_answer">
            <input type="text" value="Number answer">
        </div>
    </div>

    <div class="question_add_me hand" id="question_add_multiple_choice" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Question with multiple choice ?
        </div>
        <div class="questions_add_answer">
            <input type="checkbox" value="value">Answer 1
            <input type="checkbox" value="value">Answer 2
            <input type="checkbox" value="value">Answer 3
            <input type="checkbox" value="value">Answer 4
            <input type="checkbox" value="value">Answer 5
            <input type="checkbox" value="value">Answer 6
        </div>
    </div>

    <div class="question_add_me hand" id="question_add_multiple_choice_other" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Question with multiple answers and other ?
        </div>
        <div class="questions_add_answer">
            <input type="checkbox" value="value">Answer 1
            <input type="checkbox" value="value">Answer 2
            <input type="checkbox" value="value">Answer 3
            <input type="checkbox" value="value">Answer 4
            <input type="checkbox" value="value">Answer 5
            <input type="checkbox" value="value">Answer 6
            <input type="checkbox" value="value"><input type="text" value="Other answer">
        </div>
    </div>

    <div class="question_add_me hand" id="question_add_single_choice" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Question with single answer ?
        </div>
        <div class="questions_add_answer">
            <input type="radio" value="value" name="questions_add_single_answer">Answer 1
            <input type="radio" value="value" name="questions_add_single_answer">Answer 2
            <input type="radio" value="value" name="questions_add_single_answer">Answer 3
            <input type="radio" value="value" name="questions_add_single_answer">Answer 4
            <input type="radio" value="value" name="questions_add_single_answer">Answer 5
            <input type="radio" value="value" name="questions_add_single_answer">Answer 6
        </div>
    </div>

    <div class="question_add_me hand" id="question_add_single_choice_other" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Question with single answer and other ?
        </div>
        <div class="questions_add_answer">
            <input type="radio" value="value" name="questions_add_single_answer">Answer 1
            <input type="radio" value="value" name="questions_add_single_answer">Answer 2
            <input type="radio" value="value" name="questions_add_single_answer">Answer 3
            <input type="radio" value="value" name="questions_add_single_answer">Answer 4
            <input type="radio" value="value" name="questions_add_single_answer">Answer 5
            <input type="radio" value="value" name="questions_add_single_answer">Answer 6
            <input type="radio" value="value" name="questions_add_single_answer"><input type="text" value="Other answer">
        </div>
    </div>

    <div class="question_add_me hand" id="question_add_interval" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Question with time interval ?
        </div>
        <div class="questions_add_answer">
            <input type="text" id="questions_add_interval_date_start">
            <select>
                {section name=time_hour_interval start=0 loop=24 step=1}
                    <option value="{$smarty.section.time_hour_interval.index}">{$smarty.section.time_hour_interval.index}</option>
                {/section}
            </select>
            <select>
                {section name=time_minute_interval start=0 loop=60 step=1}
                    <option value="{$smarty.section.time_minute_interval.index}">{$smarty.section.time_minute_interval.index}</option>
                {/section}
            </select>
            -
            <input type="text" id="questions_add_interval_date_end">
            <select>
                {section name=time_hour_interval start=0 loop=24 step=1}
                    <option value="{$smarty.section.time_hour_interval.index}">{$smarty.section.time_hour_interval.index}</option>
                {/section}
            </select>
            <select>
                {section name=time_minute_interval start=0 loop=60 step=1}
                    <option value="{$smarty.section.time_minute_interval.index}">{$smarty.section.time_minute_interval.index}</option>
                {/section}
            </select>
            <script>
                $(document).ready( function()
                {
                    $('#questions_add_interval_date_start').datepicker( { dateFormat: 'yy-mm-dd' } );
                    $('#questions_add_interval_date_end').datepicker( { dateFormat: 'yy-mm-dd' } );
                } );
            </script>
        </div>
    </div>

    <div class="question_add_me hand" id="question_add_timestamp" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Question timestamp ?
        </div>
        <div class="questions_add_answer">
            <input type="text" id="questions_add_timestamp">
            <select>
                {section name=time_hour_interval start=0 loop=24 step=1}
                    <option value="{$smarty.section.time_hour_interval.index}">{$smarty.section.time_hour_interval.index}</option>
                {/section}
            </select>
            <select>
                {section name=time_minute_interval start=0 loop=60 step=1}
                    <option value="{$smarty.section.time_minute_interval.index}">{$smarty.section.time_minute_interval.index}</option>
                {/section}
            </select>
            <script>
                $(document).ready( function()
                {
                    $('#questions_add_timestamp').datepicker( { dateFormat: 'yy-mm-dd' } );
                } );
            </script>
        </div>
    </div>

    <div class="question_add_me hand" id="question_add_timestamp_date" style="float: left;">+</div>
    <div class="questions_add_item">
        <div class="questions_add_question">
            Question timestamp date ?
        </div>
        <div class="questions_add_answer">
            <input type="text" id="questions_add_timestamp_date">
            <script>
                $(document).ready( function()
                {
                    $('#questions_add_timestamp_date').datepicker( { dateFormat: 'yy-mm-dd' } );
                } );
            </script>
        </div>
    </div>

</div>

<script>
    {literal}
    function random_string( string_length )
    {
        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
        var randomstring = '';
        for (var i=0; i<string_length; i++)
        {
            var rnum = Math.floor(Math.random() * chars.length);
            randomstring += chars.substring(rnum,rnum+1);
        }
        return randomstring;
    }

    function remove_question( obj )
    {
        $( '#question_' + obj.attr('data-id') ).remove();
        return false;
    }

    function isdefined( variable )
    {
        return ( typeof( window[variable] ) == "undefined") ?  false: true;
    }

    $(document).ready( function()
    {
        $('#report_container').sortable();
        $('#report_container').disableSelection();

        function question_add( q )
        {
            var question_html = '';
            var unique = random_string( 32 );

            var found = true;
            while( found )
            {
                if ( $( '#question_' + unique ).length )
                {
                    unique = random_string( 32 );
                }
                else
                {
                    found = false;
                }
            }

            if ( q == 1 )
            {
                question_html = '<div id="question_' + unique + '" class="question_item"><input type="hidden" id="question_type_' + unique + '" value="3"><div class="question_move"></div><div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div><div class="question_question" id="question_question_' + unique + '">Single answer question with text answer ?</div><div class="question_answer"><input type="text" name="' + unique + '" id="answer_' + unique + '" value=""></div><div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">Remove</div></div>';
                question_html = question_html + '<scr' + 'ipt>$( "#question_question_' + unique + '" ).editable( function( value, settings ){ $("#question_question_' + unique + '").text( value ); }, { type: "text" } );</scr' + 'ipt>';
            }
            else if ( q == 2 )
            {
                question_html = '<div id="question_' + unique + '" class="question_item"><input type="hidden" id="question_type_' + unique + '" value="4"><div class="question_move"></div><div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div><div class="question_question" id="question_question_' + unique + '">Single answer question with number answer ?</div><div class="question_answer"><input type="text" name="' + unique + '" id="answer_' + unique + '" value=""></div><div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">Remove</div></div>';
                question_html = question_html + '<scr' + 'ipt>$( "#question_question_' + unique + '" ).editable( function( value, settings ){ $("#question_question_' + unique + '").text( value ); }, { type: "text" } );</scr' + 'ipt>';
            }
            else if ( q == 3 )
            {
                options_number = prompt( "How many options does it have ?", 3 );
                if ( options_number <= 0 )
                {
                    return false;
                }

                var options_html = '';
                var option_unique;
                var option_html;

                for( i = 0 ; i < options_number ; i++ )
                {
                    option_unique = random_string( 32 );
                    option_html = '\
                            <input type="checkbox" value="value"><label style="display: inline;" class="question_options_checkbox_' + unique + '">Answer ' + i + '</label><br />\
                        ';
                    options_html += option_html;
                }

                question_html = '\
                    <div id="question_' + unique + '" class="question_item">\
                        <input type="hidden" id="question_type_' + unique + '" value="2">\
                        <div class="question_move"></div>\
                        <div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div>\
                        <div class="question_question" id="question_question_' + unique + '">Question with multiple choice ?</div>\
                        <div class="question_answer">\
                            ' + options_html + '\
                        </div>\
                        <div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">\
                            Remove\
                        </div>\
                    </div>';

                question_html += '<scr' + 'ipt>\
                        $( "#question_question_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $("#question_question_' + unique + '").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( "#question_answer_label_1" ).editable( function( value, settings )\
                            { \
                                $("#question_answer_label_1").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( ".question_options_checkbox_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $(this).text( value );\
                                $(this).prev().val( value );\
                            } );\
                    </scr' + 'ipt>';
            }
            else if ( q == 4 )
            {
                options_number = prompt( "How many options does it have ( without other ) ?", 3 );
                if ( options_number <= 0 )
                {
                    return false;
                }

                var options_html = '';
                var option_unique;
                var option_html;

                for( i = 0 ; i < options_number ; i++ )
                {
                    option_unique = random_string( 32 );
                    option_html = '\
                            <input type="checkbox" value="value"><label style="display: inline;" class="question_options_checkbox_' + unique + '">Answer ' + i + '</label><br />\
                        ';
                    options_html += option_html;
                }

                question_html = '\
                    <div id="question_' + unique + '" class="question_item">\
                        <input type="hidden" id="question_type_' + unique + '" value="21">\
                        <div class="question_move"></div>\
                        <div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div>\
                        <div class="question_question" id="question_question_' + unique + '">Question with multiple choice and other ?</div>\
                        <div class="question_answer">\
                            ' + options_html + '\
                            <input type="checkbox" value="value"><input type="text"><br />\
                        </div>\
                        <div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">\
                            Remove\
                        </div>\
                    </div>';

                question_html += '<scr' + 'ipt>\
                        $( "#question_question_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $("#question_question_' + unique + '").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( "#question_answer_label_1" ).editable( function( value, settings )\
                            { \
                                $("#question_answer_label_1").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( ".question_options_checkbox_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $(this).text( value );\
                                $(this).prev().val( value );\
                            } );\
                    </scr' + 'ipt>';
            }
            else if ( q == 5 )
            {
                options_number = prompt( "How many options does it have ?", 3 );
                if ( options_number <= 0 )
                {
                    return false;
                }

                var options_html = '';
                var option_unique;
                var option_html;

                for( i = 0 ; i < options_number ; i++ )
                {
                    option_unique = random_string( 32 );
                    option_html = '\
                            <input type="radio" value="value" name="' + unique + '"><label style="display: inline;" class="question_options_checkbox_' + unique + '">Answer ' + i + '</label><br />\
                        ';
                    options_html += option_html;
                }

                question_html = '\
                    <div id="question_' + unique + '" class="question_item">\
                        <input type="hidden" id="question_type_' + unique + '" value="1">\
                        <div class="question_move"></div>\
                        <div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div>\
                        <div class="question_question" id="question_question_' + unique + '">Question with single choice ?</div>\
                        <div class="question_answer">\
                            ' + options_html + '\
                        </div>\
                        <div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">\
                            Remove\
                        </div>\
                    </div>';

                question_html += '<scr' + 'ipt>\
                        $( "#question_question_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $("#question_question_' + unique + '").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( "#question_answer_label_1" ).editable( function( value, settings )\
                            { \
                                $("#question_answer_label_1").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( ".question_options_checkbox_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $(this).text( value );\
                                $(this).prev().val( value );\
                            } );\
                    </scr' + 'ipt>';
            }
            else if ( q == 6 )
            {
                options_number = prompt( "How many options does it have ( without other ) ?", 3 );
                if ( options_number <= 0 )
                {
                    return false;
                }

                var options_html = '';
                var option_unique;
                var option_html;

                for( i = 0 ; i < options_number ; i++ )
                {
                    option_unique = random_string( 32 );
                    option_html = '\
                            <input type="radio" value="value" name="' + unique + '"><label style="display: inline;" class="question_options_checkbox_' + unique + '">Answer ' + i + '</label><br />\
                        ';
                    options_html += option_html;
                }

                question_html = '\
                    <div id="question_' + unique + '" class="question_item">\
                        <input type="hidden" id="question_type_' + unique + '" value="11">\
                        <div class="question_move"></div>\
                        <div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div>\
                        <div class="question_question" id="question_question_' + unique + '">Question with single choice and other ?</div>\
                        <div class="question_answer">\
                            ' + options_html + '\
                            <input type="radio" value="value" name="' + unique + '"><input type="text"><br />\
                        </div>\
                        <div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">\
                            Remove\
                        </div>\
                    </div>';

                question_html += '<scr' + 'ipt>\
                        $( "#question_question_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $("#question_question_' + unique + '").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( "#question_answer_label_1" ).editable( function( value, settings )\
                            { \
                                $("#question_answer_label_1").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( ".question_options_checkbox_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $(this).text( value );\
                                $(this).prev().val( value );\
                            } );\
                    </scr' + 'ipt>';
            }
            else if ( q == 7 )
            {
                question_html = '\
                    <div id="question_' + unique + '" class="question_item">\
                        <input type="hidden" id="question_type_' + unique + '" value="5">\
                        <div class="question_move"></div>\
                        <div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div>\
                        <div class="question_question" id="question_question_' + unique + '">Question time interval ?</div>\
                        <div class="question_answer">\
                            <input type="text" id="intervat_date_start_' + unique + '">\
                            <select>\
                                {/literal}{section name=time_hour_interval start=0 loop=24 step=1}<option value="{$smarty.section.time_hour_interval.index}">{$smarty.section.time_hour_interval.index}</option>{/section}{literal}\
                            </select>\
                            <select>\
                                {/literal}{section name=time_minute_interval start=0 loop=60 step=1}<option value="{$smarty.section.time_minute_interval.index}">{$smarty.section.time_minute_interval.index}</option>{/section}{literal}\
                            </select>\
                            -\
                            <input type="text" id="intervat_date_end_' + unique + '">\
                            <select>\
                                {/literal}{section name=time_hour_interval start=0 loop=24 step=1}<option value="{$smarty.section.time_hour_interval.index}">{$smarty.section.time_hour_interval.index}</option>{/section}{literal}\
                            </select>\
                            <select>\
                                {/literal}{section name=time_minute_interval start=0 loop=60 step=1}<option value="{$smarty.section.time_minute_interval.index}">{$smarty.section.time_minute_interval.index}</option>{/section}{literal}\
                            </select>\
                        </div>\
                        <div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">\
                            Remove\
                        </div>\
                    </div>';

                question_html += '<scr' + 'ipt>\
                        $( "#question_question_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $("#question_question_' + unique + '").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( "#intervat_date_start_' + unique + '" ).datepicker( { dateFormat: "yy-mm-dd" } );\
                        $( "#intervat_date_end_' + unique + '" ).datepicker( { dateFormat: "yy-mm-dd" } );\
                    </scr' + 'ipt>';
            }
            else if ( q == 8 )
            {
                question_html = '\
                    <div id="question_' + unique + '" class="question_item">\
                        <input type="hidden" id="question_type_' + unique + '" value="6">\
                        <div class="question_move"></div>\
                        <div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div>\
                        <div class="question_question" id="question_question_' + unique + '">Question timetamp ?</div>\
                        <div class="question_answer">\
                            <input type="text" id="questions_timestamp_' + unique + '">\
                            <select>\
                                {/literal}{section name=time_hour_interval start=0 loop=24 step=1}<option value="{$smarty.section.time_hour_interval.index}">{$smarty.section.time_hour_interval.index}</option>{/section}{literal}\
                            </select>\
                            <select>\
                                {/literal}{section name=time_minute_interval start=0 loop=60 step=1}<option value="{$smarty.section.time_minute_interval.index}">{$smarty.section.time_minute_interval.index}</option>{/section}{literal}\
                            </select>\
                        </div>\
                        <div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">\
                            Remove\
                        </div>\
                    </div>';

                question_html += '<scr' + 'ipt>\
                        $( "#question_question_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $("#question_question_' + unique + '").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( "#questions_timestamp_' + unique + '" ).datepicker( { dateFormat: "yy-mm-dd" } );\
                    </scr' + 'ipt>';
            }
            else if ( q == 9 )
            {
                question_html = '\
                    <div id="question_' + unique + '" class="question_item">\
                        <input type="hidden" id="question_type_' + unique + '" value="7">\
                        <div class="question_move"></div>\
                        <div class="question_edit" id="question_edit_' + unique + '" href="#question_edit_options"></div>\
                        <div class="question_question" id="question_question_' + unique + '">Question timetamp ?</div>\
                        <div class="question_answer">\
                            <input type="text" id="questions_timestamp_date_' + unique + '">\
                        </div>\
                        <div class="question_remove hand" data-id="' + unique + '" onclick="remove_question($(this));">\
                            Remove\
                        </div>\
                    </div>';

                question_html += '<scr' + 'ipt>\
                        $( "#question_question_' + unique + '" ).editable( function( value, settings )\
                            { \
                                $("#question_question_' + unique + '").text( value );\
                            },\
                            { \
                                type: "text"\
                            } );\
                        $( "#questions_timestamp_date_' + unique + '" ).datepicker( { dateFormat: "yy-mm-dd" } );\
                    </scr' + 'ipt>';
            }

            $('#report_container').append( question_html );

            $('.question_edit').unbind();
            $('.question_edit').click( display_question_options );
            $('.question_edit').fancybox( {} );
        }

        $('#question_add_single_text').click( function() { question_add( 1 ) } );
        $('#question_add_single_number').click( function() { question_add( 2 ) } );
        $('#question_add_multiple_choice').click( function() { question_add( 3 ) } );
        $('#question_add_multiple_choice_other').click( function() { question_add( 4 ) } );
        $('#question_add_single_choice').click( function() { question_add( 5 ) } );
        $('#question_add_single_choice_other').click( function() { question_add( 6 ) } );
        $('#question_add_interval').click( function() { question_add( 7 ) } );
        $('#question_add_timestamp').click( function() { question_add( 8 ) } );
        $('#question_add_timestamp_date').click( function() { question_add( 9 ) } );

        var options_array = {};

        function display_question_options( e )
        {
            e.preventDefault();
            unique = $(this)[0].id.substring( 14 );

            $('#question_edit_options_unique').val( unique );

            // What elements are relevant to the question selected
            if ( $('#question_type_' + unique).val() == 1 )
            {
                $('#question_edit_options_email_container').hide();
                $('#question_edit_options_charlimit_container').hide();
                $('#question_edit_options_charpool_container').hide();
                $('#question_edit_options_minimum_container').hide();
                $('#question_edit_options_maximum_container').hide();
                $('#question_edit_options_minimum_date_container').hide();
                $('#question_edit_options_maximum_date_container').hide();
                $('#question_edit_options_observations_container').show();
            }
            else if ( $('#question_type_' + unique).val() == 11 )
            {
                $('#question_edit_options_email_container').hide();
                $('#question_edit_options_charlimit_container').show();
                $('#question_edit_options_charpool_container').show();
                $('#question_edit_options_minimum_container').hide();
                $('#question_edit_options_maximum_container').hide();
                $('#question_edit_options_minimum_date_container').hide();
                $('#question_edit_options_maximum_date_container').hide();
                $('#question_edit_options_observations_container').show();
            }
            else if ( $('#question_type_' + unique).val() == 2 )
            {
                $('#question_edit_options_email_container').hide();
                $('#question_edit_options_charlimit_container').hide();
                $('#question_edit_options_charpool_container').hide();
                $('#question_edit_options_minimum_container').hide();
                $('#question_edit_options_maximum_container').hide();
                $('#question_edit_options_minimum_date_container').hide();
                $('#question_edit_options_maximum_date_container').hide();
                $('#question_edit_options_observations_container').show();
            }
            else if ( $('#question_type_' + unique).val() == 21 )
            {
                $('#question_edit_options_email_container').hide();
                $('#question_edit_options_charlimit_container').show();
                $('#question_edit_options_charpool_container').show();
                $('#question_edit_options_minimum_container').hide();
                $('#question_edit_options_maximum_container').hide();
                $('#question_edit_options_minimum_date_container').hide();
                $('#question_edit_options_maximum_date_container').hide();
                $('#question_edit_options_observations_container').show();
            }
            else if ( $('#question_type_' + unique).val() == 3 )
            {
                $('#question_edit_options_email_container').show();
                $('#question_edit_options_charlimit_container').show();
                $('#question_edit_options_charpool_container').show();
                $('#question_edit_options_minimum_container').hide();
                $('#question_edit_options_maximum_container').hide();
                $('#question_edit_options_minimum_date_container').hide();
                $('#question_edit_options_maximum_date_container').hide();
                $('#question_edit_options_observations_container').show();
            }
            else if ( $('#question_type_' + unique).val() == 4 )
            {
                $('#question_edit_options_email_container').hide();
                $('#question_edit_options_charlimit_container').hide();
                $('#question_edit_options_charpool_container').hide();
                $('#question_edit_options_minimum_container').show();
                $('#question_edit_options_maximum_container').show();
                $('#question_edit_options_minimum_date_container').hide();
                $('#question_edit_options_maximum_date_container').hide();
                $('#question_edit_options_observations_container').show();
            }
            else if ( $('#question_type_' + unique).val() == 5 )
            {
                $('#question_edit_options_email_container').hide();
                $('#question_edit_options_charlimit_container').hide();
                $('#question_edit_options_charpool_container').hide();
                $('#question_edit_options_minimum_container').hide();
                $('#question_edit_options_maximum_container').hide();
                $('#question_edit_options_minimum_date_container').show();
                $('#question_edit_options_maximum_date_container').show();
                $('#question_edit_options_observations_container').show();
            }
            else if ( $('#question_type_' + unique).val() == 6 )
            {
                $('#question_edit_options_email_container').hide();
                $('#question_edit_options_charlimit_container').hide();
                $('#question_edit_options_charpool_container').hide();
                $('#question_edit_options_minimum_container').hide();
                $('#question_edit_options_maximum_container').hide();
                $('#question_edit_options_minimum_date_container').show();
                $('#question_edit_options_maximum_date_container').show();
                $('#question_edit_options_observations_container').show();
            }
            else if ( $('#question_type_' + unique).val() == 7 )
            {
                $('#question_edit_options_email_container').hide();
                $('#question_edit_options_charlimit_container').hide();
                $('#question_edit_options_charpool_container').hide();
                $('#question_edit_options_minimum_container').hide();
                $('#question_edit_options_maximum_container').hide();
                $('#question_edit_options_minimum_date_container').show();
                $('#question_edit_options_maximum_date_container').show();
                $('#question_edit_options_observations_container').show();
            }

            // What values have the elements
            options = options_array[unique];

            if ( typeof options !== 'undefined' )
            {
                if ( options['question_edit_options_email_enabled'] )
                {
                    $('#question_edit_options_email_enabled').attr( 'checked', true );
                }
                else
                {
                    $('#question_edit_options_email_enabled').attr( 'checked', false );
                }

                if ( options['question_edit_options_charlimit_enabled'] )
                {
                    $('#question_edit_options_charlimit_enabled').attr( 'checked', true );
                    $('#question_edit_options_charlimit').val( options['question_edit_options_charlimit'] );
                }
                else
                {
                    $('#question_edit_options_charlimit_enabled').attr( 'checked', false );
                    $('#question_edit_options_charlimit').val( '0' );
                }

                if ( options['question_edit_options_charpool_enabled'] )
                {
                    $('#question_edit_options_charpool_enabled').attr( 'checked', true );
                    $('#question_edit_options_charpool').val( options['question_edit_options_charpool'] );
                }
                else
                {
                    $('#question_edit_options_charpool_enabled').attr( 'checked', false );
                    $('#question_edit_options_charpool').val( '' );
                }

                if ( options['question_edit_options_minimum_enabled'] )
                {
                    $('#question_edit_options_minimum_enabled').attr( 'checked', true );
                    $('#question_edit_options_minimum').val( options['question_edit_options_minimum'] );
                }
                else
                {
                    $('#question_edit_options_minimum_enabled').attr( 'checked', false );
                    $('#question_edit_options_minimum').val( '' );
                }

                if ( options['question_edit_options_maximum_enabled'] )
                {
                    $('#question_edit_options_maximum_enabled').attr( 'checked', true );
                    $('#question_edit_options_maximum').val( options['question_edit_options_maximum'] );
                }
                else
                {
                    $('#question_edit_options_maximum_enabled').attr( 'checked', false );
                    $('#question_edit_options_maximum').val( '' );
                }

                if ( options['question_edit_options_minimum_date_enabled'] )
                {
                    $('#question_edit_options_minimum_date_enabled').attr( 'checked', true );
                    $('#question_edit_options_minimum_date').val( options['question_edit_options_minimum_date'] );
                    $('#question_edit_options_minimum_date_hour').val( options['question_edit_options_minimum_date_hour'] );
                    $('#question_edit_options_minimum_date_minute').val( options['question_edit_options_minimum_date_minute'] );
                }
                else
                {
                    $('#question_edit_options_minimum_date_enabled').attr( 'checked', false );
                    $('#question_edit_options_minimum_date').val( '' );
                    $('#question_edit_options_minimum_date_hour').val( '' );
                    $('#question_edit_options_minimum_date_minute').val( '' );
                }

                if ( options['question_edit_options_maximum_date_enabled'] )
                {
                    $('#question_edit_options_maximum_date_enabled').attr( 'checked', true );
                    $('#question_edit_options_maximum_date').val( options['question_edit_options_maximum_date'] );
                    $('#question_edit_options_maximum_date_hour').val( options['question_edit_options_maximum_date_hour'] );
                    $('#question_edit_options_maximum_date_minute').val( options['question_edit_options_maximum_date_minute'] );
                }
                else
                {
                    $('#question_edit_options_maximum_date_enabled').attr( 'checked', false );
                    $('#question_edit_options_maximum_date').val( '' );
                    $('#question_edit_options_maximum_date_hour').val( '' );
                    $('#question_edit_options_maximum_date_minute').val( '' );
                }

                if ( options['question_edit_options_observations_enabled'] )
                {
                    $('#question_edit_options_observations_enabled').attr( 'checked', true );
                    $('#question_edit_options_observations').val( options['question_edit_options_observations'] );
                }
                else
                {
                    $('#question_edit_options_observations_enabled').attr( 'checked', false );
                    $('#question_edit_options_observations').val( '' );
                }
            }
            else
            {
                $('#question_edit_options_email_enabled').attr( 'checked', false );

                $('#question_edit_options_charlimit_enabled').attr( 'checked', false );
                $('#question_edit_options_charlimit').val( '0' );

                $('#question_edit_options_charpool_enabled').attr( 'checked', false );
                $('#question_edit_options_charpool').val( '' );

                $('#question_edit_options_minimum_enabled').attr( 'checked', false );
                $('#question_edit_options_minimum').val( '' );

                $('#question_edit_options_maximum_enabled').attr( 'checked', false );
                $('#question_edit_options_maximum').val( '' );

                $('#question_edit_options_minimum_date_enabled').attr( 'checked', false );
                $('#question_edit_options_minimum_date').val( '' );
                $('#question_edit_options_minimum_date_hour').val( '' );
                $('#question_edit_options_minimum_date_minute').val( '' );

                $('#question_edit_options_maximum_date_enabled').attr( 'checked', false );
                $('#question_edit_options_maximum_date').val( '' );
                $('#question_edit_options_maximum_date_hour').val( '' );
                $('#question_edit_options_maximum_date_minute').val( '' );

                $('#question_edit_options_observations_enabled').attr( 'checked', false );
                $('#question_edit_options_observations').val( '' );

            }
            //alert( options );
        }

        

        $('#save_report_model').click( function()
        {
            // This is where the magic happens

            var questions = $('#report_container > .question_item');
            var unique = '';

            var question_data = [];
            var question_item = {};

            for( i = 0 ; i < questions.length ; i++ )
            {
                question_item = {};

                unique = questions[i].id.substring( 9 );
                question_type = $( '#question_type_' + unique );

                question_item['type'] = question_type.val();
                question_item['question'] = $('#question_question_' + unique).text();

                if ( ( question_type.val() == 1 ) || ( question_type.val() == 11 ) || ( question_type.val() == 2 ) || ( question_type.val() == 21 ) )
                {
                    question_item['answers'] = [];
                    question_answers = $('#question_' + unique + ' > .question_answer > label');
                    for ( j = 0 ; j < question_answers.length ; j++ )
                    {
                        question_item['answers'].push( $(question_answers[j]).text() );
                    }
                }
                question_item['filters'] = options_array[unique];
                question_data.push( question_item );
            }

            question_data_encoded = $.toJSON( question_data );

            $('#save_report_model_form_data').val( question_data_encoded );

            var p = 'data=' + encodeURIComponent( question_data_encoded ) +
                    '&Report_name=' + encodeURIComponent( $('#Report_model').val() );

            $.post(
                    '/report/create-action/',
                    p,
                    function( s, t )
                    {
                        
                    },
                    'json'
                );
            
        } );

        $('#question_edit_options_minimum_date').datepicker( { dateFormat: "yy-mm-dd" } );
        $('#question_edit_options_maximum_date').datepicker( { dateFormat: "yy-mm-dd" } );

        $('#question_edit_options_apply').click( function()
        {
            unique = $('#question_edit_options_unique').val();
            unique_temp = {};

            unique_temp['question_edit_options_email_enabled'] = $('#question_edit_options_email_enabled:checked').length;

            unique_temp['question_edit_options_charlimit_enabled'] = $('#question_edit_options_charlimit_enabled:checked').length;
            if ( unique_temp['question_edit_options_charlimit_enabled'] )
            {
                unique_temp['question_edit_options_charlimit'] = $('#question_edit_options_charlimit').val();
            }
            else
            {
                unique_temp['question_edit_options_charlimit'] = '0';
            }

            unique_temp['question_edit_options_charpool_enabled'] = $('#question_edit_options_charpool_enabled:checked').length;
            if ( unique_temp['question_edit_options_charpool_enabled'] )
            {
                unique_temp['question_edit_options_charpool'] = $('#question_edit_options_charpool').val();
            }
            else
            {
                unique_temp['question_edit_options_charpool'] = '';
            }

            unique_temp['question_edit_options_minimum_enabled'] = $('#question_edit_options_minimum_enabled:checked').length;
            if ( unique_temp['question_edit_options_minimum_enabled'] )
            {
                unique_temp['question_edit_options_minimum'] = $('#question_edit_options_minimum').val();
            }
            else
            {
                unique_temp['question_edit_options_minimum'] = 0;
            }

            unique_temp['question_edit_options_maximum_enabled'] = $('#question_edit_options_maximum_enabled:checked').length;
            if ( unique_temp['question_edit_options_maximum_enabled'] )
            {
                unique_temp['question_edit_options_maximum'] = $('#question_edit_options_maximum').val();
            }
            else
            {
                unique_temp['question_edit_options_maximum'] = 0;
            }

            unique_temp['question_edit_options_minimum_date_enabled'] = $('#question_edit_options_minimum_date_enabled:checked').length;
            if ( unique_temp['question_edit_options_minimum_date_enabled'] )
            {
                unique_temp['question_edit_options_minimum_date'] = $('#question_edit_options_minimum_date').val();
                unique_temp['question_edit_options_minimum_date_hour'] = $('#question_edit_options_minimum_date_hour').val();
                unique_temp['question_edit_options_minimum_date_minute'] = $('#question_edit_options_minimum_date_minute').val();
            }
            else
            {
                unique_temp['question_edit_options_minimum_date'] = '';
                unique_temp['question_edit_options_minimum_date_hour'] = '';
                unique_temp['question_edit_options_minimum_date_minute'] = '';
            }

            unique_temp['question_edit_options_maximum_date_enabled'] = $('#question_edit_options_maximum_date_enabled:checked').length;
            if ( unique_temp['question_edit_options_maximum_date_enabled'] )
            {
                unique_temp['question_edit_options_maximum_date'] = $('#question_edit_options_maximum_date').val();
                unique_temp['question_edit_options_maximum_date_hour'] = $('#question_edit_options_maximum_date_hour').val();
                unique_temp['question_edit_options_maximum_date_minute'] = $('#question_edit_options_maximum_date_minute').val();
            }
            else
            {
                unique_temp['question_edit_options_maximum_date'] = '';
                unique_temp['question_edit_options_maximum_date_hour'] = '';
                unique_temp['question_edit_options_maximum_date_minute'] = '';
            }

            unique_temp['question_edit_options_observations_enabled'] = $('#question_edit_options_observations_enabled:checked').length;
            if ( unique_temp['question_edit_options_observations_enabled'] )
            {
                unique_temp['question_edit_options_observations'] = $('#question_edit_options_observations').val();
            }
            else
            {
                unique_temp['question_edit_options_observations'] = '';
            }

            options_array[unique] = unique_temp;

            $.fancybox.close();
        } );

    } );
    {/literal}
</script>

<div id="question_edit_options_container" class="question_edit_options_container">
    <div id="question_edit_options" class="question_edit_options">
        <input type="hidden" id="question_edit_options_unique" value="">
        <div id="question_edit_options_email_container">
            <input type="checkbox" id="question_edit_options_email_enabled"><label for="question_edit_options_email_enabled">Validate as email</label>
        </div>
        <div id="question_edit_options_charlimit_container">
            <input type="checkbox" id="question_edit_options_charlimit_enabled"><label for="question_edit_options_charlimit_enabled">Limit length</label>
            <input type="text" id="question_edit_options_charlimit" value="0">
        </div>
        <div id="question_edit_options_charpool_container">
            <input type="checkbox" id="question_edit_options_charpool_enabled"><label for="question_edit_options_charpool_enabled">Limit characters allowed</label>
            <input type="text" id="question_edit_options_charpool" value="">
        </div>
        <div id="question_edit_options_minimum_container">
            <input type="checkbox" id="question_edit_options_minimum_enabled"><label for="question_edit_options_minimum_enabled">Minimum value</label>
            <input type="text" id="question_edit_options_minimum" value="0">
        </div>
        <div id="question_edit_options_maximum_container">
            <input type="checkbox" id="question_edit_options_maximum_enabled"><label for="question_edit_options_maximum_enabled">Maximum value</label>
            <input type="text" id="question_edit_options_maximum" value="0">
        </div>
        <div id="question_edit_options_minimum_date_container">
            <input type="checkbox" id="question_edit_options_minimum_date_enabled"><label for="question_edit_options_minimum_date_enabled">Minimum date</label>
            <input type="text" id="question_edit_options_minimum_date" value="0">
            <select id="question_edit_options_minimum_date_hour">
                {section name=time_hour_interval start=0 loop=24 step=1}
                    <option value="{$smarty.section.time_hour_interval.index}">{$smarty.section.time_hour_interval.index}</option>
                {/section}
            </select>
            <select id="question_edit_options_minimum_date_minute">
                {section name=time_minute_interval start=0 loop=60 step=1}
                    <option value="{$smarty.section.time_minute_interval.index}">{$smarty.section.time_minute_interval.index}</option>
                {/section}
            </select>
        </div>
        <div id="question_edit_options_maximum_date_container">
            <input type="checkbox" id="question_edit_options_maximum_date_enabled"><label for="question_edit_options_maximum_date_enabled">Maximum date</label>
            <input type="text" id="question_edit_options_maximum_date" value="0">
            <select id="question_edit_options_maximum_date_hour">
                {section name=time_hour_interval start=0 loop=24 step=1}
                    <option value="{$smarty.section.time_hour_interval.index}">{$smarty.section.time_hour_interval.index}</option>
                {/section}
            </select>
            <select id="question_edit_options_maximum_date_minute">
                {section name=time_minute_interval start=0 loop=60 step=1}
                    <option value="{$smarty.section.time_minute_interval.index}">{$smarty.section.time_minute_interval.index}</option>
                {/section}
            </select>
        </div>
        <div id="question_edit_options_observations_container">
            <input type="checkbox" id="question_edit_options_observations_enabled"><label for="question_edit_options_observations_enabled">Remarks</label>
            <input type="text" id="question_edit_options_observations">
        </div>

        <input type="button" id="question_edit_options_apply" value="Apply filters">
    </div>
</div>